import * as React from 'react'
import { Navigate } from 'react-router-dom'
const Discover = React.lazy(() => import('@/pages/discover'))
const Mine = React.lazy(() => import('@/pages/mine'))
const Friend = React.lazy(() => import('@/pages/friend'))
// 子路由
const LYFAlbum = React.lazy(() => import('@/pages/discover/c-pages/album'))
const LYFArtist = React.lazy(() => import('@/pages/discover/c-pages/artist'))
const LYFDjradio = React.lazy(() => import('@/pages/discover/c-pages/djradio'))
const LYFRanking = React.lazy(() => import('@/pages/discover/c-pages/ranking'))
const LYFRecommend = React.lazy(() =>
  import('@/pages/discover/c-pages/recommend')
)

const LYFSongs = React.lazy(() => import('@/pages/discover/c-pages/songs'))
const routes = [
  {
    path: '/',
    element: <Navigate to="/discover" />
  },
  {
    path: '/discover',
    element: (
      <React.Suspense fallback={<></>}>
        <Discover />
      </React.Suspense>
    ),
    children: [
      {
        index: true,
        element: (
          <React.Suspense fallback={<></>}>
            <LYFAlbum />
          </React.Suspense>
        )
      },
      {
        path: 'album',
        element: (
          <React.Suspense fallback={<></>}>
            <LYFAlbum />
          </React.Suspense>
        )
      },
      {
        path: 'artist',
        element: (
          <React.Suspense fallback={<></>}>
            <LYFArtist />
          </React.Suspense>
        )
      },
      {
        path: 'djradio',
        element: (
          <React.Suspense fallback={<></>}>
            <LYFDjradio />
          </React.Suspense>
        )
      },
      {
        path: 'ranking',
        element: (
          <React.Suspense fallback={<></>}>
            <LYFRanking />
          </React.Suspense>
        )
      },
      {
        path: 'recommend',
        element: (
          <React.Suspense fallback={<></>}>
            <LYFRecommend />
          </React.Suspense>
        )
      },
      {
        path: 'songs',
        element: (
          <React.Suspense fallback={<></>}>
            <LYFSongs />
          </React.Suspense>
        )
      }
    ]
  },
  {
    path: '/mine',
    element: (
      <React.Suspense fallback={<></>}>
        <Mine />
      </React.Suspense>
    )
  },
  {
    path: '/friend',
    element: (
      <React.Suspense fallback={<></>}>
        <Friend />
      </React.Suspense>
    )
  }
]

export default routes
